<template>
    <div>
        <el-input :placeholder="placeholder" v-model="display" clearable readonly>
            <el-button slot="append" icon="el-icon-crop" @click.native="openDialogVisible"></el-button>
        </el-input>

        <el-dialog v-dialogDrag title="选择数据" :visible.sync="dialogTableVisible" :close-on-click-modal="false"
            :modal="false" :modal-append-to-body="false" :width="config.width">

            <div class="dailogbody">
                <div class="flexwrapper">
                    <div>
                        <el-input placeholder="请输入内容" v-model="search" class="input-with-select" size="small"
                            v-if="config.search">
                            <el-select v-model="select" slot="prepend" placeholder="请选择" style="width:90px">
                                <el-option :label="item.label" :value="item.value"
                                    v-for="(item,index) in config.searchOption" :key="index"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search" @click="getDataTable()" v-if="isAuth()">
                            </el-button>
                        </el-input>
                    </div>
                    <div class="flexright">
                        <el-button type="primary" round @click="getDataTable()" v-if="isAuth()" size="small">刷新
                        </el-button>
                    </div>
                </div>

                <ec-table size="small" :data="gridData">
                    <el-table-column property="date" label="日期" width="150"></el-table-column>
                    <el-table-column property="name" label="姓名" width="200"></el-table-column>
                    <el-table-column property="address" label="地址"></el-table-column>
                </ec-table>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDailog()">取消</el-button>
                <el-button size="small" type="primary" :loading="submitLoading" @click="dataFormSubmit()">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import request from '@/plugin/axios'
    export default {
        props: {
            // 默认提示
            placeholder: {
                type: String,
                default: '请选择'
            },
            // 数据绑定
            value: {
                type: String,
                default: ''
            },
            // 数据接口
            api: {
                type: String,
                default: '',
                required: true
            },
            config: {
                type: Object,
                default: {
                    search: true,
                    placeholder: '请选择',
                    searchOption: [{
                        label: '名称',
                        value: 'name'
                    }, {
                        label: '编码',
                        value: 'code'
                    }, {
                        label: '其他',
                        value: 'other'
                    }],
                    width: '40%'
                }
            }
        },
        data() {
            return {
                submitLoading: false,
                input: '',
                dialogTableVisible: false,
                search: '',
                select: '',
                display: '',
                gridData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }]
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.visible = true
            },
            // 查询数据
            getDataTable(params) {
                return request({
                    url: api,
                    method: 'get',
                    params: request.adornParams(params)
                })
            },
            openDialogVisible() {
                console.log("大开发")
                this.dialogTableVisible = true
            },
            handleChange() {
                this.$emit("input", this.values)
            },
            closeDailog() {
                // this.$refs['dataForm'].resetFields()
                this.dialogTableVisible = false
            },
            // 表单提交
            dataFormSubmit() {
                this.dialogTableVisible = false
                this.submitLoading = false
            }
        }
    }
</script>
<style scoped>
    .dailogbody {
        padding: 15px;
    }

    .flexwrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-bottom: 10px;
    }

    .flexwrapper>div {
        width: 50%;
    }

    .flexright {
        text-align: right;
    }
</style>